{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}{{ post.title }}{% endblock %}
{% block main %}
    <div class="content-wrap">
        <div id="content" class="content">
            <div id="posts" class="posts-expand">
                <article class="post post-type-normal">
                    <header class="post-header">
                        <h1 class="post-title">
                            <a class="post-title-link" href="{{ post.get_absolute_url }}">
                                {{ post.title }}
                            </a>
                        </h1>
                        <div class="post-meta">
                              <span class="post-time">
                              <span class="post-meta-item-icon">
                                <i class="fa fa-calendar-o"></i>
                              </span>
                              <span class="post-meta-item-text">发表于</span>
                              <time title="创建于" datetime="{{ post.publish }}">
                                {{ post.publish }}
                              </time>
                                </span>
                            <span class="post-category"><span class="post-meta-divider">|</span>
                                    <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span>
                                    <span class="post-meta-item-text">分类于</span>
                                    <span><a href="{% url 'blog:category_detail' post.category.name %} " rel="index"><span>{{ post.category.name }}</span></a></span>
                                </span>
                            <span class="post-comments-count">
                                    <span class="post-meta-divider">|</span>
                                    <span class="post-meta-item-icon">
                                      <i class="fa fa-comment-o"></i>
                                    </span>
                                    <a href="{{ post.get_absolute_url }}#comments">
                                      <span class="post-comments-count disqus-comment-count">{{ post.comments.count }} Comments</span>
                                    </a>
                                  </span>
                            <span id="/2016/publishing-github-pages-with-travis-ci/" class="leancloud_visitors"
                                  data-flag-title="{{ post.title }}">
                                   <span class="post-meta-divider">|</span>
                                   <span class="post-meta-item-icon">
                                     <i class="fa fa-eye"></i>
                                   </span>

                                     <span class="post-meta-item-text">阅读次数 </span>

                                     <span class="leancloud-visitors-count">{{ post.views}}</span>
                                 </span>
                        </div>
                    </header>
                    <div class="post-body" itemprop="articleBody">
                        {{ post.body|safe }}
                        <ul class="post-copyright">
                            <li class="post-copyright-author">
                                <strong>本文作者：</strong>
                                {{ post.author }}
                            </li>
                            <li class="post-copyright-link">
                                <strong>本文链接：</strong>
                                <a href="{{ post.get_absolute_url }}"
                                   title="{{ post.title }}">www.cluas.me{{ post.get_absolute_url }}</a>
                            </li>
                            <li class="post-copyright-license">
                                <strong>版权声明： </strong>
                                本博客所有文章除特别声明外，均采用
                                <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow"
                                   target="_blank">
                                    CC BY-NC-SA 3.0 CN</a>
                                许可协议。转载请注明出处！
                            </li>
                        </ul>
                    </div>
                    <footer class="post-footer">
                        <div class="post-tags">
                            {% for tag in post.tags.all %}
                                <a href="{% url 'blog:tag_detail' tag.name %}" rel="tag"># {{ tag.name }}</a>
                            {% endfor %}
                        </div>
                        <div class="post-nav">
                            <div class="post-nav-next post-nav-item">
                                {% if post.get_previous_by_publish %}
                                    <a href="{{ post.get_previous_by_publish.get_absolute_url }}" rel="next"
                                       title="{{ post.get_previous_by_publish.title }}"><i
                                            class="fa fa-chevron-left"></i>
                                        {{ post.get_previous_by_publish.title|truncatechars:'15' }}</a>
                                {% endif %}
                            </div>
                            <span class="post-nav-divider"></span>
                            <div class="post-nav-prev post-nav-item">
                                {% if post.get_next_by_publish %}
                                    <a href="{{ post.get_next_by_publish.get_absolute_url }}" rel="next"
                                       title="{{ post.get_next_by_publish.title }}">
                                        {{ post.get_next_by_publish.title }}
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </footer>
                </article>
                <div class="post-spread"></div>
            </div>
        </div>
        <div class="comments" id="comments">
            {% include 'easy_comment/comment_form.html' with post=post %}
            {% include 'easy_comment/comment_list.html' with post=post %}
        </div>
    </div>
{% endblock %}
{% block toc %}
    <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
        <div class="post-toc" style="max-height: 584px; width: calc(100% + 0px);">
            <div class="post-toc-content">
                {{ post.toc|safe }}
            </div>
        </div>
    </section>
{% endblock %}
{% block css %}
<!-- 评论框、评论列表和通知列表的样式 -->
<link rel="stylesheet" href="{% static 'easy_comment/css/comment.css' %}">
<!-- 代码块的高亮 -->
<link rel="stylesheet" href="{% static 'easy_comment/css/prism.css' %}">
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
<script>
    $(window).load(function () {
        if (!$(".comment-reply").hasClass('no-login')){
            $(".comment-form")[0].reset();
        }
        if (sessionStorage.getItem('reply')){
            sessionStorage.removeItem('reply');
        }

        // if true,说明是提交评论后刷新的页面，将位置跳到新评论处
        if (sessionStorage.getItem('anchor')){
            var top = $(sessionStorage.getItem('new_comment')).offset().top;
            $('body,html').animate({scrollTop:top}, 50);
            window.location.hash = sessionStorage.getItem('new_comment');
            sessionStorage.removeItem('anchor');
        }
    });
    $(document).ready(function () {
        $(".comment-content img").removeAttr('style');
        // 点击取消回复按钮，按钮消失，同时抹除sessionStorage里记录的reply
        $("#cancel-reply").click(function () {
            sessionStorage.removeItem('reply');
            document.getElementById('cancel-reply').style.display = 'none';
            document.getElementById('reply-to').style.display = 'none';
        });

        // 点击评论里的回复，页面定位到评论框，同时取消回复按钮出现
        $(".comment-reply").click(function () {
            if ($(this).hasClass('no-login')){
                alert('登陆后才能回复');
                return false;
            }
            var pid = $(this).attr('ID').replace('a-', '');
            sessionStorage.setItem('reply', true);
            sessionStorage.setItem('pid', pid);
            document.getElementById('cancel-reply').style.display = '';
            $(".reply-to-name").text($(this).data('name'));
            document.getElementById('reply-to').style.display = '';
        });

        // 提交评论，发送ajax post
        $(".comment-form").submit(function (e) {
            e.preventDefault();
            // 如果是机器发的垃圾信息，表单的所有字段都会填写
            if ($("#id_honeypot").val().length > 0){
                alert("spam!");
                return false;
            }
            content = CKEDITOR.instances.id_content.getData();
            var list = content.replace(/<.*?>/ig,"").replace(/&nbsp;/ig, "").replace(/\s/g, "");
            if (list.length == 0){
                alert("评论不能为空！！");
                window.location.reload();
                return false;
            }
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
            });
            pid = $('#id_parent option:selected').val();
            if (sessionStorage.getItem('reply')){
                pid = sessionStorage.getItem('pid');
                sessionStorage.removeItem('reply');
            }
            $.ajax({
                type:'post',
                url:"{% url 'easy_comment:submit_comment' post.id %}",
                data:{
                    'honeypot':$("#id_honeypot").val(),
                    'content':content,
                    'parent':pid,
                    'post':$('#id_post option:selected').val()
                },
                dataType:'json',
                // 提交成功后，根据返回数据，把新评论的id保存在sessionStorage中，然后刷新页面
                success:function (json) {
                    sessionStorage.setItem('anchor', true);
                    sessionStorage.setItem('new_comment', json.new_comment);
                    window.location.reload();
                },
                error:function (json) {
                    alert(json.msg);
                }
            });
        });
        $("a.like").click(function (e) {
            e.preventDefault();
            if ($(this).hasClass('no-login')){
                alert('请在登陆后执行该操作');
                return false;
            }
            var x = $(this).data('id');
            var action = $(this).data('action');
            var like_obj = $("#like-" + x);
            var dislike_obj = $("#dislike-" + x);
            var like_num = parseInt($(like_obj).find("span.like-total").text());
            var dislike_num = parseInt($(dislike_obj).find("span.dislike-total").text());
            if (action == 'like'){
                $(like_obj).find("span.like-total").text(like_num + 1);
                $(like_obj).find("span.glyphicon").addClass('red-finger');
                $(like_obj).data('action', 'cancel-like');
                if ($(dislike_obj).data('action') == 'cancel-dislike'){
                    $(dislike_obj).find("span.dislike-total").text(dislike_num + 1);
                    $(dislike_obj).find("span.glyphicon").removeClass('red-finger');
                    $(dislike_obj).data('action', 'dislike');
                }
            }
            if (action == 'cancel-like'){
                $(like_obj).find("span.like-total").text(like_num - 1);
                $(like_obj).find("span.glyphicon").removeClass('red-finger');
                $(like_obj).data('action', 'like');
            }
            if (action == 'dislike'){
                $(dislike_obj).find("span.dislike-total").text(dislike_num - 1);
                $(dislike_obj).find("span.glyphicon").addClass('red-finger');
                $(dislike_obj).data('action', 'cancel-dislike');
                if ($(like_obj).data('action') == 'cancel-like'){
                    $(like_obj).find("span.like-total").text(like_num - 1);
                    $(like_obj).find("span.glyphicon").removeClass('red-finger');
                    $(like_obj).data('action', 'like');
                }
            }
            if (action == 'cancel-dislike'){
                $(dislike_obj).find("span.dislike-total").text(dislike_num + 1);
                $(dislike_obj).find("span.glyphicon").removeClass('red-finger');
                $(dislike_obj).data('action', 'dislike');
            }
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
             });
            $.post(
                '{% url 'easy_comment:like' %}',
                {
                    id:x,
                    action:action
                },
                function (data) {
                    if (data['msg'] == 'KO'){
                        alert('Invalid action!');
                    }
                }
            );

        });
    });
</script>
{% endblock %}



